<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-mytext="msg"></div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //如果在自定义指令中只用到了bind和update钩子函数
        //并且 bind和 update中做的事情是完全一样的

        // 那么我们就可以使用自定义指令的简写形式

        // Vue.directive("指令名称", function(el, binding){
        //     //这个函数，其实就是bind 和update 要使用的函数
        // })

        

        //自己定义一个mytext来实现text的功能
        // Vue.directive("mytext", {
        //     bind(el, binding){
        //         //将用户所赋值的表达式msg的值赋值给div的innerText
        //         el.innerText = binding.value;
        //     },
        //     update(el, binding){
        //         el.innerText = binding.value;                
        //     }
        // })

        Vue.directive("mytext", function(el, binding){
            el.innerText = binding.value;
        })


        var vm = new Vue({
            el: "#app",
            data: {
                msg: "你说人生如梦，我说人生如酒"
            }
        })
    </script>
</body>

</html>